<template>
  <div class="title_box">
    <!-- 汇总信息区域 -->
    <div class="column_box">
      <!-- 左侧：data_1 -->
      <div>
        <div class="money_txt">
          {{ apo.user.currency_symbol }} {{ apo.utils.formatAmount(activityData.lose || 0) }}
        </div>
        <div class="t_box">
          <span>{{ $t('activity.resgatar.title_1') }}</span>
        </div>
      </div>
      <!-- 右侧：data_2 -->
      <div>
        <div class="money_txt color-2">
          {{ apo.user.currency_symbol }} {{ apo.utils.formatAmount(activityData.reward || 0) }}
        </div>
        <div class="t_box">
          <span>{{ $t('activity.resgatar.title_2') }}</span>
        </div>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="btn">
      <div v-for="item in tabs" class="btn-item" :class="{ 'btn-item-disabled': item.disabled }"
        @click="item.callback()">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 属性声明（保持运行时行为不变）
defineProps(["tabs", "activityData"]);
</script>

<style scoped lang="scss">
/* 布局：容器 */
.title_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  display: block;
  position: relative;
  margin-top: -0.5rem;
  z-index: 2;
}

/* 列容器 */
.column_box {
  display: flex;
  gap: 0.3rem;
  background: #3F2E4B;
  border-radius: 0.3rem;
  padding: 0.3rem;
}

.column_box>div {
  width: 100%;
  padding: 0.5rem 0;
  background: #291632;
  border-radius: 0.2rem;
}

/* 金额主文案 */
.column_box>div .money_txt {
  text-align: center;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.54rem;
  color: #FFD700;
}

/* 右侧金额颜色变体 */
.color-2 {
  color: #FF8A4B !important;
}

/* 副标题文案 */
.column_box>div .t_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-size: 0.32rem;
  margin-top: 0.2rem;
  color: #86718C;
}

/* 按钮区域 */
.btn {
  display: flex;
  gap: 0.5rem;
  justify-content: space-around;
  margin-top: 0.3rem;
}

.btn div {
  width: 100%;
  cursor: pointer;
  height: 1.1rem;
  border-radius: 0.3rem;
  font-family: Arial;
  font-weight: 700;
  font-size: 0.38rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 按钮配色变体 */
.btn-item:nth-child(1) {
  background-color: #8266FD;
  color: #fff;
}

.btn-item:nth-child(2) {
  background-color: #FD66B1;
  color: #fff;
}

/* 禁用态 */
.btn-item-disabled {
  opacity: 0.4;
}
</style>
